<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<%@ page import="java.util.ArrayList, edu.wfmanage.models.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%-- <script type="text/javascript" src="datepick.js"></script>
<script type="text/css" src="datepick.css"></script> --%>
<script language="JavaScript" type="text/javascript">
function doValidation() {
	 //alert("In Validation");
	 var fare=document.getElementById("fare").value;
	 var mode=document.getElementById("mode").value;
	 var travelDate=document.getElementById("travelDate").value;
	 //alert("Travel Date"+travelDate);
	 //alert("mode:"+mode);
	 var distance=document.getElementById("distance").value;
	 var source=document.getElementById("source").value;
	 var destination=document.getElementById("destination").value;
	 var tktNor=document.getElementById("ticketNor").value;
	// alert("Distance:"+distance);
	 //fnCheckNumeric(distance);
	 if (mode==""||tktNor == ""||fare==""||source==""||destination==""||distance==""||travelDate=="")
		{
		alert("All fields are manadtaory.Please enter appropriately");
		return false;
		}
	 
	 var then = new Date(decodeURIComponent(travelDate));
	 var now = new Date();
	 if (now.getTime() < then.getTime()) { 
	alert("Travel should not be more than current date");
	return false;
	 }
	//Allow only alphabetic characters
	 var alphabets='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
	 var Cnt=0;
	 for (Cnt=0; Cnt < source.length; Cnt++)
	 {
	  if (alphabets.indexOf(source.substring (Cnt, Cnt+1)) == -1)
	  {
	   alert( " Source should be alphabetic");
	   return(false);
	  }
	 }
	 Cnt=0;
	 for (Cnt=0; Cnt < source.length; Cnt++)
	 {
	  if (alphabets.indexOf(destination.substring (Cnt, Cnt+1)) == -1)
	  {
	   alert( " Destination Should be alphabet should be alphabetic");
	   return(false);
	  }
	 }
	 var lstrRefString="1234567890";
	 //var lstrInString = fnStripSpaces(distance);
	 var Count;
	 for (Count=0; Count < distance.length; Count++)
	 {
		// alert("In for loop");
	       if (lstrRefString.indexOf (distance.substring (Count, Count+1))==-1)
	 {
	   alert("Distance should be Integer");
	   return false;
	 }
	    }
	 for (Count=0; Count < fare.length; Count++)
	 {
		// alert("In for loop");
	       if (lstrRefString.indexOf (fare.substring (Count, Count+1))==-1)
	 {
	   alert("Fare should be Integer");
	   return false;
	 }
	    }
	 //fnCheckNumeric(distance);
	return true;
	}

function fnCheckNumeric(astrFieldValue)
{
var lstrRefString="1234567890";
var lstrInString = astrFieldValue;
//alert(" In fnCheckNumeric");
//check only the characters present in RefString are entered
 var Count;
for (Count=0; Count < astrFieldValue.length; Count++)
{
      if (lstrRefString.indexOf (astrFieldValue.substring (Count, Count+1))==-1)
{
  alert("Distance should be Integer");
  return false;
}
   }
   return true;
}

  
// User Changeable Vars
var HighlightToday  = true;    // use true or false to have the current day highlighted
var DisablePast    = false;    // use true or false to allow past dates to be selectable
// The month names in your native language can be substituted below
var MonthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

// Global Vars
var now = new Date();
var dest = null;
var ny = now.getFullYear(); // Today's Date
var nm = now.getMonth();
var nd = now.getDate();
var sy = 0; // currently Selected date
var sm = 0;
var sd = 0;
var y = now.getFullYear(); // Working Date
var m = now.getMonth();
var d = now.getDate();
var l = 0;
var t = 0;
var MonthLengths = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

/*
  Function: GetDate(control)

  Arguments:
    control = ID of destination control
*/
function GetDate() {
  EnsureCalendarExists();
  DestroyCalendar();
  // One arguments is required, the rest are optional
  // First arguments must be the ID of the destination control
  if(arguments[0] == null || arguments[0] == "") {
    // arguments not defined, so display error and quit
    return;
  } else {
    // copy argument
	  dest = arguments[0];
  }
  y = now.getFullYear();
  m = now.getMonth();
  d = now.getDate();
  sm = 0;
  sd = 0;
  sy = 0;
  var cdval = dest.value;
  if(/\d{1,2}.\d{1,2}.\d{4}/.test(dest.value)) {
    // element contains a date, so set the shown date
    var vParts = cdval.split("/"); // assume mm/dd/yyyy
    sm = vParts[0] - 1;
    sd = vParts[1];
    sy = vParts[2];
    m=sm;
    d=sd;
    y=sy;
  }
  
//  l = dest.offsetLeft; // + dest.offsetWidth;
//  t = dest.offsetTop - 125;   // Calendar is displayed 125 pixels above the destination element
//  if(t<0) { t=0; }      // or (somewhat) over top of it. ;)

  /* Calendar is displayed 125 pixels above the destination element
  or (somewhat) over top of it. ;)*/
  l = dest.offsetLeft + dest.offsetParent.offsetLeft+260;
  t = dest.offsetTop+250;
  //alert(t);
 // alert(l);
  if(t < 0) t = 0; // >
  DrawCalendar();
}

/*
  function DestoryCalendar()
  
  Purpose: Destory any already drawn calendar so a new one can be drawn
*/
function DestroyCalendar() {
  var cal = document.getElementById("dpCalendar");
  if(cal != null) {
    cal.innerHTML = null;
    cal.style.display = "none";
  }
  return
}

function DrawCalendar() {
  DestroyCalendar();
  cal = document.getElementById("dpCalendar");
  cal.style.left = l + "px";
  cal.style.top = t + "px";
  
  var sCal = "<table><tr><td class=\"cellButton\"><a href=\"javascript: PrevMonth();\" title=\"Previous Month\">&lt;&lt;</a></td>"+
    "<td class=\"cellMonth\" width=\"80%\" colspan=\"5\">"+MonthNames[m]+" "+y+"</td>"+
    "<td class=\"cellButton\"><a href=\"javascript: NextMonth();\" title=\"Next Month\">&gt;&gt;</a></td></tr>"+
    "<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>";
  var wDay = 1;
  var wDate = new Date(y,m,wDay);
  if(isLeapYear(wDate)) {
    MonthLengths[1] = 29;
  } else {
    MonthLengths[1] = 28;
  }
  var dayclass = "";
  var isToday = false;
  for(var r=1; r<7; r++) {
    sCal = sCal + "<tr>";
    for(var c=0; c<7; c++) {
      var wDate = new Date(y,m,wDay);
      if(wDate.getDay() == c && wDay<=MonthLengths[m]) {
        if(wDate.getDate()==sd && wDate.getMonth()==sm && wDate.getFullYear()==sy) {
          dayclass = "cellSelected";
          isToday = true;  // only matters if the selected day IS today, otherwise ignored.
        } else if(wDate.getDate()==nd && wDate.getMonth()==nm && wDate.getFullYear()==ny && HighlightToday) {
          dayclass = "cellToday";
          isToday = true;
        } else {
          dayclass = "cellDay";
          isToday = false;
        }
        if(((now > wDate) && !DisablePast) || (now <= wDate) || isToday) { // >
          // user wants past dates selectable
          sCal = sCal + "<td class=\""+dayclass+"\"><a href=\"javascript: ReturnDay("+wDay+");\">"+wDay+"</a></td>";
        } else {
          // user wants past dates to be read only
          sCal = sCal + "<td class=\""+dayclass+"\">"+wDay+"</td>";
        }
        wDay++;
      } else {
        sCal = sCal + "<td class=\"unused\"></td>";
      }
    }
    sCal = sCal + "</tr>";
  }
  sCal = sCal + "<tr><td colspan=\"4\" class=\"unused\"></td><td colspan=\"3\" class=\"cellCancel\"><a href=\"javascript: DestroyCalendar();\">Cancel</a></td></tr></table>"
  cal.innerHTML = sCal; // works in FireFox, opera
  cal.style.display = "inline";
}

function PrevMonth() {
  m--;
  if(m==-1) {
    m = 11;
    y--;
  }
  DrawCalendar();
}

function NextMonth() {
  m++;
  if(m==12) {
    m = 0;
    y++;
  }
  DrawCalendar();
}

function ReturnDay(day) {
  cDest = document.getElementById(dest);
  dest.value = (m+1)+"/"+day+"/"+y;
  //dest.value = y+"-"(m+1)+"-"+day;
  DestroyCalendar();
}

function EnsureCalendarExists() {
  if(document.getElementById("dpCalendar") == null) {
    var eCalendar = document.createElement("div");
    eCalendar.setAttribute("id", "dpCalendar");
    document.body.appendChild(eCalendar);
  }
}

function isLeapYear(dTest) {
  var y = dTest.getYear();
  var bReturn = false;
  
  if(y % 4 == 0) {
    if(y % 100 != 0) {
      bReturn = true;
    } else {
      if (y % 400 == 0) {
        bReturn = true;
      }
    }
  }
  
  return bReturn;
}  
  
  </script>
  <style type="text/css">
/**************************************************************************************
  htmlDatePicker CSS file
  
  Feel Free to change the fonts, sizes, borders, and colours of any of these elements
***************************************************************************************/
/* The containing DIV element for the Calendar */
#dpCalendar {
  display: none;          /* Important, do not change */
  position: absolute;        /* Important, do not change */
  background-color: #eeeeee;
  color: black;
  font-size: xx-small;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  width: 150px;
}
/* The table of the Calendar */
#dpCalendar table {
  border: 1px solid black;
  background-color: #eeeeee;
  color: black;
  font-size: xx-small;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  width: 100%;
}
/* The Next/Previous buttons */
#dpCalendar .cellButton {
  background-color: #ddddff;
  color: black;
}
/* The Month/Year title cell */
#dpCalendar .cellMonth {
  background-color: #ddddff;
  color: black;
  text-align: center;
}
/* Any regular day of the month cell */
#dpCalendar .cellDay {
  background-color: #ddddff;
  color: black;
  text-align: center;
}
/* The day of the month cell that is selected */
#dpCalendar .cellSelected {
  border: 1px solid red;
  background-color: #ffdddd;
  color: black;
  text-align: center;
}
/* The day of the month cell that is Today */
#dpCalendar .cellToday {
  background-color: #ddffdd;
  color: black;
  text-align: center;
}
/* Any cell in a month that is unused (ie: Not a Day in that month) */
#dpCalendar .unused {
  background-color: transparent;
  color: black;
}
/* The cancel button */
#dpCalendar .cellCancel {
  background-color: #cccccc;
  color: black;
  border: 1px solid black;
  text-align: center;
}
/* The clickable text inside the calendar */
#dpCalendar a {
  text-decoration: none;
  background-color: transparent;
  color: blue;
}  
  </style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New LTA request page</title>
</head>
<body>
<s:form action="newRequest">
<table id="text">
<tr><s:textfield name="limit" label = "Your LTA Limit" value="%{LTALimit}" id="myinput" size="20" readonly="true" /></tr>
<tr><td><b>Enter your Travel Details</b></td></tr>
<tr>
<s:select label="Mode of Travel" headerKey="" headerValue="Select Mode of Travel" name="mode" list="#{'Flight':'By Flight', 'Train':'By Train', 'Bus':'By Bus'}" value="" id="mode" />
</tr>
<tr><s:textfield name="ticketNor" label = "Ticket Number" id="ticketNor" size="20" /></tr>
<tr><s:textfield name="distance" label = "Distance in kms(approx)" id="distance" size="20" /></tr>
<s:textfield name="travelDate" label = "Travel Date" value="select Travel Date!" id="travelDate" onClick="GetDate(this);" size="20" />
<%-- <s:textfield name="travelonDate" label = "Travelled on" value="select Travel Date!" id="travelDate" onClick="GetDate(this);" size="20" /> --%>
 <tr><s:textfield name="source" label = "Source City" id="source" size="20" /></tr>
<tr><s:textfield name="destination" label = "Destination City" id="destination" size="20" /></tr>
<tr><s:textfield name="fare" label = "TravellingFare" id="fare" size="20" /></tr>
</table>
<s:submit name = "commandButton" id="mysubmit" value="Submit Claim" onClick="return doValidation()" align="center" />
   <%--  <s:submit name = "commandButton" id="mysubmit" value="Submit Claim" align="center" /> --%>
</s:form>
<center>
<s:form action="logout" align="center">
<s:submit name = "submit" value="Back to Home Page" align="center"/>
</s:form>
</center>
</body>
</html>


